<template>
	<view class="recommend_box">
		<u-sticky>
			<view class="header_share w750 flex">
				<input class="uni_ipt" type="text" v-model="keyword" placeholder-style="color: #CCC;" placeholder-class="s24 f500 family" placeholder="输入下单人/手机号" />
				<image class="search_img" src="../static/search.png"></image>
				<view @click="search" class="search_btn s26 f500 family txtali">搜索</view>
			</view>
			<view class="head_riqi_box w750 flex">
				<uni-datetime-picker type="date" :value="startDate" start="2021-3-20" end="2111-6-30" @change="change" />
				<view class="zhi_txt s26 family f500">至</view>
				<uni-datetime-picker type="date" :value="endDate" start="2021-3-20" end="2111-6-30" @change="change1" />
				<view class="shaixuan_btn s24 family f500 txtali" @click="screen">筛选</view>
			</view>
		</u-sticky>
		<view class="list_box w750" v-for="(item, index) in recommendList" :key="index">
			<view class="head_goods_detail flexjus">
				<view class="flex align-center" v-if="item.type == 'goods'">
					<view class="left_img_box">
						<image :src="item.goods_list[0].goods.image_src"></image>
					</view>
					<view class="center_goods_name family s26 f500">{{ item.goods_list[0].difference[0] }} {{ item.goods_list[0].goods.title }}</view>
				</view>
				<view class="flex align-center" v-else>
					<view class="left_img_box">
						<image :src="baseUrl + item.goods_list[0].image"></image>
					</view>
					<view class="center_goods_name family s26 f500">{{ item.goods_list[0].name }}</view>
				</view>
				<view class="goods_price">
					<view class="top_price s32 family f500">
						<text class="s24">￥</text>
						{{ item.goods_list[0].price }}
					</view>
					<view class="bot_number s22 family f500">共{{ item.goods_num }}件</view>
				</view>
			</view>
			<view class="shop_box_detail flexjus">
				<view class="left_title_name flex">
					<view class="shop_title_txt s24 family f500">所属店铺</view>
					<view class="shop_name_txt familytow s24">
						{{ item.shop }}
					</view>
				</view>
				<view class="right_phone_icon">
					<image @click="makePhoneCall(item.mobile)" class="w100 h100" src="../../schedule/static/13.png"></image>
				</view>
			</view>
			<view class="order_detail_box flexjus">
				<view class="order_left_box">
					<view class="order_left_txt_box flex">
						<view class="left_title s22 f500 family">订单号</view>
						<view class="left_name_txt familytow s24">
							{{ item.order_no }}
						</view>
					</view>
					<view class="order_left_txt_box flex">
						<view class="left_title s22 f500 family">订单时间</view>
						<view class="left_name_txt familytow s24">
							{{ get_datesForDian(item.created_at) }}
						</view>
					</view>
					<view class="order_left_txt_box flex">
						<view class="left_title s22 f500 family">购买人</view>
						<view class="left_name_txt familytow s24">
							{{ item.name }}
						</view>
					</view>
				</view>
				<view class="order_left_box">
					<view class="order_left_txt_box flex">
						<view class="left_title s22 f500 family">联系方式</view>
						<view class="left_name_txt familytow s24">
							{{ item.mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3') }}
						</view>
					</view>
					<view class="order_left_txt_box flex">
						<view class="left_title s22 f500 family">成交金额</view>
						<view class="left_name_txt familytow s24">¥{{ item.pay.actual_payment }}</view>
					</view>
					<view class="order_left_txt_box flex">
						<view class="left_title s22 f500 family">订单状态</view>
						<view class="left_name_txt familytow s24" style="color: #ff3f4a">
							{{ item.state_name }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import baseUrls from './baseUrl.js';
export default {
	data() {
		return {
			startDate: '',
			endDate: '',
			keyword: '',
			recommendList: [],
			page: 1,
			totalPage: 1,
			baseUrl: baseUrls.baseUrl
		};
	},
	onLoad() {
		uni.showLoading({
			title: '数据请求中···'
		});
		this.getList();
	},
	onReachBottom() {
		this.page++;
		if (this.page > this.totalPage) {
			return this.$wanlshop.msg('我是有底线的');
		}
		this.getList();
	},
	methods: {
		// 筛选订单
		search() {
			this.getList();
		},
		// 筛选订单
		screen() {
			this.getList();
		},
		getList() {
			const that = this;
			this.$request({
				url: 'order/recommend',
				method: 'POST',
				data: {
					start: this.startDate,
					end: this.endDate,
					keyword: this.keyword,
					page: this.page
				}
			}).then((res) => {
				uni.hideLoading();
				const { code, data, msg } = res.data;
				if (code == 1) {
					that.totalPage = data.last_page;
					that.recommendList = [...that.recommendList, ...data.list];
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					});
				}
			});
		},
		makePhoneCall(mobile) {
			uni.makePhoneCall({
				phoneNumber: mobile,
				success() {
					return false;
				},
				fail() {
					return false;
				}
			});
		},
		change(e) {
			this.startDate = e;
		},
		// 选择结束日期
		change1(e) {
			this.endDate = e;
		}
	}
};
</script>

<style scoped lang="scss">
.recommend_box {
	padding-bottom: 50upx;
	.list_box {
		height: 408upx;
		background-color: #fff;
		margin-top: 16upx;
		padding: 20rpx 32rpx 32rpx 32rpx;
		box-sizing: border-box;
		.order_detail_box {
			margin-top: 20upx;
			.order_left_box {
				width: 60%;
				&:nth-of-type(even) {
					width: 40%;
				}
				.order_left_txt_box {
					margin-bottom: 20upx;
					.left_title {
						width: 88upx;
						white-space: nowrap;
						text-align: justify;
						text-align-last: justify;
						color: #888;
					}
					.left_name_txt {
						color: #333;
						white-space: nowrap;
						margin-left: 20upx;
					}
				}
			}
		}
		.shop_box_detail {
			margin-top: 24upx;
			.left_title_name {
				.shop_title_txt {
					color: #888;
				}
				.shop_name_txt {
					color: #333;
					margin-left: 20upx;
				}
			}
			.right_phone_icon {
				width: 40upx;
				height: 40upx;
			}
		}
		.head_goods_detail {
			padding-bottom: 20upx;
			border-bottom: 2upx solid #f4f4f4;
			.left_img_box {
				width: 116upx;
				height: 116upx;
				background-color: #666666;
				border-radius: 8upx;
				overflow: hidden;
			}
			.left_img_box image {
				width: 100%;
				height: 100%;
			}
			.center_goods_name {
				width: 356upx;
				height: 88upx;
				margin-left: 26upx;
				line-height: 44upx;
				display: -webkit-box;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
			.goods_price {
				margin-top: 22upx;
				.top_price {
					color: #333333;
					text-align: center;
				}
				.bot_number {
					color: #666666;
					margin-top: 10upx;
					text-align: center;
				}
			}
		}
	}
	.header_share {
		height: 94upx;
		background: #ffffff;
		overflow: hidden;

		.uni_ipt {
			width: 460upx;
			height: 68upx;
			background: #f3f3f3;
			border-radius: 8upx 8upx 8upx 8upx;
			margin-left: 32upx;
			margin-top: 12upx;
			padding-left: 78upx;
		}

		.search_img {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			left: 50rpx;
			margin-top: 28rpx;
		}

		.search_btn {
			width: 116upx;
			height: 68upx;
			background: #e0a76d;
			border-radius: 34upx 34upx 34upx 34upx;
			line-height: 68upx;
			color: #ffffff;
			margin-top: 10upx;
			margin-left: 32upx;
		}
	}
	.head_riqi_box {
		height: 94upx;
		background: #ffffff;

		/deep/ .uni-date {
			width: 290upx;
			height: 50upx;
			background: #f3f3f3;
			border-radius: 58upx 58upx 58upx 58upx;
		}

		/deep/ .uni-date-x--border {
			border: none !important;
		}

		/deep/ .uni-date-x {
			margin-top: 6upx;
		}

		.zhi_txt {
			color: #999999;
			line-height: 94upx;
		}

		.shaixuan_btn {
			width: 104upx;
			height: 50upx;
			background: #666666;
			border-radius: 25upx 25upx 25upx 25upx;
			line-height: 50upx;
			color: #ffffff;
			margin-top: 18upx;
			margin-left: 6upx;
		}
	}
}
</style>
<style>
page {
	background-color: #f4f4f4;
}
</style>
